<template>
	<div class="ds">
		<div class="dtdatil_title flex align_center">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size: 1.8rem;" @click="fh"></i>
			<span class="flex1">打赏</span>
			<i class="el-icon-arrow-left" style="opacity: 0;float: right;margin-right: 4%;font-size: 1.8rem;" @click="fh"></i>
		
		</div>
		<div class="ds_title">
			<img src="../../../../static/img/images/ds1.png" />
			<div class="ds_td">
				<img :src="people.head_img_s"  @error='(e)=>{e.target.src="../../../../static/img/images/people.jpg"}' />
				<p>打赏给：&nbsp;{{people.username}}</p>
			</div>
		</div>
		<div class="ds_content clear2">
			<div class="ds_contentImg" @click="dashan2(1)">
				<img src="../../../../static/img/images/ds2.png" />
				<p class="flex align_center justify_cen">￥1</p>
			</div>
			<div class="ds_contentImg" @click="dashan2(2)">
				<img src="../../../../static/img/images/ds2.png" />
				<p class="flex align_center justify_cen">￥2</p>
			</div>
			<div class="ds_contentImg" @click="dashan2(5)">
				<img src="../../../../static/img/images/ds2.png" />
				<p class="flex align_center justify_cen">￥5</p>
			</div>
		</div>
		<div class="ds_content clear2">
			<div class="ds_contentImg" @click="dashan2(10)">
				<img src="../../../../static/img/images/ds2.png" />
				<p class="flex align_center justify_cen">￥10</p>
			</div>
			<div class="ds_contentImg" @click="dashan2(50)">
				<img src="../../../../static/img/images/ds2.png" />
				<p class="flex align_center justify_cen">￥50</p>
			</div>
			<div class="ds_contentImg" @click="dashan2(100)">
				<img src="../../../../static/img/images/ds2.png" />
				<p class="flex align_center justify_cen">￥100</p>
			</div>
		</div>
		<div style="padding-top: 10%;text-align: center;" @click="show(1)">
			<el-button round style='background: #4297ff;color: #fff;'>自定义金额</el-button>
		</div>
		<div class="ds_footer flex justify_cen align_center" @click="show(2)">
			<img src="../../../../static/img/images/ds4.png" />
			关于赏金分配
		</div>
		<div v-show="show1" class="ds_background" :style="{'height':Height+'px'}">
		</div>
		<div class="ds_tk" v-show="show2">
			<div class="ds_tktitle flex align_center">
				<i  class="el-icon-close" style="opacity: 0;margin-left: 4%;font-weight: bold;"></i>
				<p class="flex1">自定义打赏金额</p>
				<i @click="close" class="el-icon-close" style="margin-right: 4%;font-weight: bold;color: #999;"></i>
			</div>
			<div class="ds_tkbody">
				<div class="ds_tkinput flex align_center">
					<span>￥</span>
					<input v-model="Text" type="number" placeholder="输入打赏金额" />
				</div>
				<div style="text-align: center" @click="dashan">
					<el-button round :class='Text==""?"pink":"red"' >打赏</el-button>
				</div>
			</div>
		</div>
		<div class="ds_tk" v-show="show3">
			<div class="ds_tktitle flex align_center">
				<i @click="close" class="el-icon-close" style="opacity: 0;margin-left: 4%;font-weight: bold;"></i>
				<p class="flex1">关于赏金分配</p>
				<i class="el-icon-close" style="opacity: 0;margin-right: 4%;font-weight: bold;"></i>
			</div>
			<div class="ds_tkbody" style="padding: 2rem 0;">
				<p>内容发布者=80%</p>
				<p>平台手续费=20%</p>
				
			</div>
			<div style="text-align: center;padding: 0.5rem;border-top: 1px solid #eeeeec;" @click="close">
				<el-button  type="text" style='font-size: 1.8rem;color: #4297ff;'>知道了</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data: function() {
			return {
				people:{},
				Height:0,
				Text:'',
				show1:false,
				show2:false,
				show3:false,
			}
		},
		mounted() {
			this.people=JSON.parse(this.$route.query.Data);
			this.Height = document.body.offsetHeight;
		},
		methods: {
			dashan2(val){
				this.Text=val;
				this.dashan();
			},
			dashan(){
				let num = parseFloat(this.Text);
				num=num*100;
				this.$http.post(this.defines.createDynamicOrder, {
						uid: window.uid,
						dy_id:this.people.d_id,
						order_true:num,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								console.log(data);
								this.weixinzhifu(data.data.data.order_code)
							}
							else{
							}
						},
						(error) => {
							console.log(error);
						}
					);
			},
			weixinzhifu(code){
				
				this.$http.post(this.defines.WxPay, {
						uid: window.uid,
						order_code:code,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								console.log(data);
								WeixinJSBridge.invoke(
							        'getBrandWCPayRequest', data.data.data.jsApiParameters, 
							        function(res){
							            if(res.err_msg == "get_brand_wcpay_request:ok" ) {
							            	Toast('支付成功');
							            	this.fh();
							            	
							            }else{
							            	Toast(res.err_code+res.err_desc+res.err_msg);
							            }
							        }
							    );
							}
							else{
							}
						},
						(error) => {
							console.log(error);
						}
					);
			},
			je(val){
				this.Text=val;
				this.show1=true;
				this.show2=true;
			},
			show(type){
				this.show1=true;
				if(type==1){
					this.show2=true;
				}
				else{
					this.show3=true;
				}
			},
			close(){
				this.Text="";
				this.show1=false;
				this.show2=false;
				this.show3=false;
			},
			fh(){
        		window.history.go(-1);
        	},

		}
	}
</script>

<style scoped>
	.ds{
		width: 100%;
	}
	.dtdatil_title {
		
		text-align: center;
	    color: #1c1c1c;
	    font-size: 1.6rem;
	    line-height: 1.6rem;
	    padding: 3% 0;
	    border-bottom: 1px solid #e7e9ee;
	}
	.ds_title{
		width: 100%;
		position: relative;
	}
	.ds_title img{
		width: 100%;
		display: block;
	}
	.ds_td{
		margin-top: -25px;
	}
	.ds_td img{
		display: block;
		width: 50px;
		margin: 0 auto;
		height: 50px;
		object-fit: cover;
		border-radius: 50px;
	}
	.ds_td p{
		font-size: 1.5rem;
		margin: 0;
		padding: 1rem 0;
		text-align: center;
	}
	.ds_content{
		width: 66%;
		margin: 0 auto;
		margin-top: 10%;
		
	}
	.ds_contentImg{
		width: 25%;
		float: left;
		position: relative;
	}
	.ds_contentImg:nth-child(2){
		margin: 0 12.5%;
	}
	.ds_contentImg img{
		width: 100%;
		display: block;
	}
	.ds_contentImg p{
		position: absolute;
		z-index: 1;
		height: 100%;
		top: 0;
		text-align: center;
		width: 100%;
		color: #715a1d;
		font-size: 1.5rem;
	}
	.ds_footer{
		position: fixed;
		bottom: 5%;
		left: 0;
		z-index: 1;
		width: 100%;
		font-size: 1.3rem;
		color: #8f8f8f;
	}
	.ds_footer img{
		height: 1.3rem;
		margin-right: 0.5rem;
	}
	.ds_background{
		width: 100%;
		opacity: 0.2;
		background: #000;
		position: fixed;
		z-index: 2;
		left: 0;
		top: 0;
	}
	.ds_tk{
		width: 80%;
		background: #fff;
		margin: 0 auto;
		position: fixed;
		z-index: 3;
		border-radius: 0.8rem;
		overflow: hidden;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-webkit--moz-transform: translate(-50%,-50%);
	}
	.ds_tktitle{
		padding: 1.5rem 0;
		border-bottom: 1px solid #eeeeec;
		width: 100%;
	}
	.ds_tktitle i{
		font-size: 2rem;
		font-weight: bold;
	}
	.ds_tktitle p{
		font-size: 1.5rem;
		text-align: center;
	}
	.ds_tkbody{
		width: 80%;
		margin: 0 auto;
	}
	.ds_tkinput{
		padding-bottom: 0.5rem ;
		margin: 2rem 0;
		width: 100%;
		font-size: 1.4rem;
		border-bottom: 1px solid #eeeeec;
	}
	.ds_tkinput span{
		display: inline-block;
		height: 20px;
	}
	.ds_tkinput input{
		border: 0;
		height: 20px;
		font-size: 1.4rem;
		text-indent: 10px;
	}
	.pink{
		width: 90%;
		background: #ffcdcd;
		color: #fff;
		margin: 0 auto;
		margin-bottom:2rem ;
	}
	.red{
		background: #ff4242;
		width: 90%;
		color: #fff;
		margin: 0 auto;
		margin-bottom:2rem ;
	}
	.ds_tkbody p{
		width: 100%;
		text-align: center;
		font-size: 1.4rem;
		padding: 0.25rem 0;
	}
</style>